<template>
  <div class="progressCircle">
    <svg viewBox="0 0 36 36" class="circular-chart">
      <path
        class="circle-bg"
        :stroke="color"
        d="M18 2
          a 16 16 0 0 1 0 32
          a 16 16 0 0 1 0 -32"
      ></path>
      <path
        class="circle"
        :stroke="color"
        :stroke-dasharray="`${dash},100`"
        d="M18 2 
          a 16 16 0 0 1 0 32
          a 16 16 0 0 1 0 -32"
      ></path>
      <text x="18" y="20.35" class="percentage">{{ dash }}%</text>
    </svg>
  </div>
</template>
<script lang="ts">
import { computed, defineComponent, ref } from "vue";
export default defineComponent({
  props: {
    color: {
      default: "red",
      type: String,
    },
    number: {
      default: 0.4,
      type: Number,
    },
  },
  setup(props) {
    const dash = computed(() => {
      return props.number * 100;
    });
    return { dash };
  },
});
</script>
<style lang="scss" scoped>
.progressCircle {
  flex: 1;
  min-width: 40px;
  max-width: 90px;
  position: relative;
  .circle-bg {
    fill: none;
    opacity: 0.3;
    stroke-width: 1.2;
  }
  .circle {
    fill: none;
    stroke-width: 2;
    stroke-linecap: round;
    animation: progress 1s ease-out forwards;
  }
  .percentage {
    fill: #fff;
    font-size: 0.5em;
    text-anchor: middle;
    font-weight: 400;
  }
  @keyframes progress {
    0% {
      stroke-dasharray: 0 100;
    }
  }
}
</style>
